<template>
	<div>
		<el-dialog v-model="showPayView" width="400px" title="扫码支付">
			<div class="qrcode" ref="qrCodeUrl"></div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showPayView=false">取消</el-button>
					<el-button type="primary" @click="okPay()">已支付</el-button>
				</span>
			</template>
		</el-dialog>
		<el-row>
			<h3>订单付款</h3>
		</el-row>
		<el-card class="box-card">
		    <template #header>
		      <div class="card-header">
		        <span>订单详情</span>
		      </div>
		    </template>
			<template v-if="OrderInfo.ord">
				<div class="text item">
					<label>订单编号：</label>
					<label>{{OrderInfo.ord.ordid}}</label>
				</div>
				<div class="text item">
					<label>联系电话：</label>
					<label>{{OrderInfo.ord.phone}}</label>
				</div>
				<div class="text item">
					<label>收货地址：</label>
					<label>{{OrderInfo.ord.addr}}</label>
				</div>
				<div class="text item">
					<label>订单总价：</label>
					<label>{{OrderInfo.ord.amount}}</label>
				</div>
				<div class="text item">
					<label>创建时间：</label>
					<label>{{filterDate(OrderInfo.ord.tcreate)}}</label>
				</div>
				<div class="text item" v-if="OrderInfo.ord.tpay">
					<label>支付时间：</label>
					<label>{{filterDate(OrderInfo.ord.tpay)}}</label>
				</div>
				<div class="text item">
					<label>当前状态：</label>
					<el-button type="danger" @click="ToPay()" v-if="OrderInfo.ord.ispay==0">去付款</el-button>
					<el-button type="success" v-else>已付款</el-button>
				</div>
			</template>
		</el-card>
		<el-table :data="OrderInfo.items"
			style="width: 100%;">
			<el-table-column label="图片" align="center">
				<template #default="scope">
					<el-avatar shape="square" :size="100"
						:src="`${$ServerUrl}/api/public/showImg/${scope.row.picture}`">
					</el-avatar>
				</template>
			</el-table-column>
			<el-table-column label="名称" prop="name"/>
			<el-table-column label="单价" prop="price" align="center"/>
			<el-table-column label="数量" prop="num" align="center" />
			<el-table-column label="总价" align="center">
				<template #default="scope">
					{{scope.row.price * scope.row.num}}
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
import QRCode from 'qrcodejs2';
import { ElMessage } from 'element-plus';
import {mapState} from 'vuex';
export default{
	name:'Pay',
	data(){
		return {
			ordid:'',
			payImg:false,//已加载支付二维码
			OrderInfo:[],//订单信息
			showPayView:false,//扫码支付弹窗
		}
	},
	computed:{
		filterDate(){
			return (t)=>{
				let now = new Date(t);
				let year = now.getFullYear();
				let month = this.toNum(now.getMonth() + 1);
				let day = this.toNum(now.getDate());
				let hours = this.toNum(now.getHours());
				let min = this.toNum(now.getMinutes());
				let sec = this.toNum(now.getSeconds());
				return `${year}-${month}-${day} ${hours}:${min}:${sec}`;
			}
		}
	},
	methods:{
		//获取订单详情
		getOrderInfo(){
			if(!this.ordid)return false;
			//获取订单信息
			this.axios.get('/api/fore/ord/findInfoByOrdid/'+this.ordid).then((res)=>{
				let data = res.data;
				if(data.code==200){
					this.OrderInfo = data.data;
				}
			}).catch((err)=>{
				console.log(err);
			})
		},
		//去付款
		ToPay(){
			this.showPayView = true;
			if(!this.payImg){
				//生成二维码
				setTimeout(()=>{
					 var qrcode = new QRCode(this.$refs.qrCodeUrl, {
						text: '订单号：'+this.OrderInfo.ord.ordid+" 支付金额："+this.OrderInfo.ord.amount +"元",
						width: 150,
						height: 150,
						colorDark: '#000000',
						colorLight: '#ffffff',
						correctLevel: QRCode.CorrectLevel.H
					})
					this.payImg = true;
				},100)
			}
		},
		//已支付
		okPay(){
			let arg = {ordid:this.ordid,ispay:1}
			this.axios.post('/api/fore/ord/addPay',arg).then((res)=>{
				let data = res.data;
				if(data.code==200){
					this.showPayView = false;
					this.PushMsg('success','支付成功！');
					this.getOrderInfo();
				}
			}).catch((err)=>{
				console.log(err);
			})
		},
		toNum(t){
			return t>=10 ? t: '0'+t;
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		}, 
	},
	created() {
		this.ordid = this.$route.query.ordid;
		this.getOrderInfo();
	}
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
}
:deep(.el-dialog__footer){
	text-align: center;
}
.qrcode{
    display: flex;
	align-items: center;
	justify-content: center;
}
.qrcode img {
        width: 132px;
        height: 132px;
        background-color: #fff; 
        padding: 6px;
        box-sizing: border-box;
    }
</style>
